<template>
  <div class="register-container">
    <h2>欢迎注册</h2>
    <form @submit.prevent="register" class="from">
      <div class="form-group">
        <label for="username">用户名</label>
        <input v-model="user.username" required type="text"/>
      </div>
      <div class="form-group">
        <label for="email">邮  &nbsp; 箱</label>
        <input v-model="user.email" required type="email"/>
      </div>
      <div class="form-group">
        <label for="password">密 &nbsp; 码</label>
        <input v-model="user.password" required type="password"/>
      </div>
      <div style="display: flex;width: 200px;margin: auto">
        <button class="login-button" type="button" @click="handleLoginClick">登录</button>

        <button type="submit" class="login-button" style="margin-left: 10px;">注册</button>
      </div>

    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: {
        username: '',
        email: '',
        password: ''
      },
      error: ''
    };
  },
  methods: {
    register() {
      try {
        axios.post('/user/add', this.user);
        this.$router.push('/front/uLogin'); // 注册成功后重定向到首页
      } catch (error) {
        this.error = error.response.data.message || '注册失败，请重试';
      }
    },
    handleLoginClick() {
      // 然后跳转到注册页面
      this.$router.push('/front/uLogin');
    }
  }
};
</script>
<style scoped>
.register-container {
  width: 500px;
  margin: 50px auto;
  text-align: center;
  padding: 20px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.register-container h2 {
  text-align: center;

  margin-bottom: 30px;
}
.from{
  width: 80%;
  margin: auto;
}
.form-group {
  width: 90%;
  margin:20px auto;
  justify-self: self-start;
  display: flex;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  //flex: 1;
}

.form-group input {
  //width: 50%;
  padding: 8px;
  margin-left: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  flex: 1;
}

button {
  width: 50px;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  flex: 1;
  margin-bottom: 10px;
}

button:hover {
  background-color: #369a70;
}

p {
  color: red;
  text-align: center;
}

.login-button {
}
</style>
